<template>
  <div class="ExpenseRecord">
    <a-card>
      <a-row :gutter="40" style="margin-left:1%">
        <a-col :span="8">手机号码：{{this.$store.state.phoneNum}}</a-col>
        <a-col :span="8">注册时间：{{this.$store.state.cerateTime}}</a-col>
        <a-col :span="8">地域：{{this.$store.state.registryProvince}}{{this.$store.state.registryCity}}</a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top:2%">
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="订单编号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['orderNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['equipmentNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="售后状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['afterState']" placeholder="全部">
                <a-select-option :value="1">全部</a-select-option>
                <a-select-option :value="2">待审核</a-select-option>
                <a-select-option :value="3">退款中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="创建时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['creationTime']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="15" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findUserConsumeRecordListByCondition($event)">查询</a-button>
            <a-button type="dashed">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="全部" key="1">
          <a-table
            :columns="columns"
            :dataSource="data"
            :pagination="pagination"
            @change="handleTableChange"
            :rowKey="record => record.orderId"
          >
            <template slot="paymentWay" slot-scope="text,record">
              <div>{{record.paymentMethodName}}</div>
              <div class="blue" @click="paymentRecordModal(text,record)">支付记录</div>
            </template>
            <template slot="operation" slot-scope="text,record">
              <div class="blue" @click="detailsInfo(text,record)">详情</div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="已支付" key="2" forceRender>
          <a-table
            :columns="columnsPaid"
            :dataSource="dataPaid"
            :pagination="paginationPaid"
            @change="TablePaid"
            :rowKey="record => record.orderId"
          >
            <template slot="paymentWay" slot-scope="text,record">
              <div>{{record.paymentMethodName}}</div>
              <div class="blue" @click="paymentRecordModal(text,record)">支付记录</div>
            </template>
            <template slot="operation">
              <div class="blue" @click="detailsInfo(text,record)">详情</div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="未支付" key="3">
          <a-table
            :columns="columnsNo"
            :dataSource="dataNo"
            :pagination="paginationNo"
            @change="TableNo"
            :rowKey="record => record.orderId"
          >
            <template slot="paymentWay" slot-scope="text,record">
              <div>{{record.paymentMethodName}}</div>
              <div class="blue" @click="paymentRecordModal(text,record)">未支付详情</div>
            </template>
            <template slot="operation">
              <div class="blue" @click="detailsInfo(text,record)">详情</div>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-modal
      :title="paymentRecordTitle"
      :visible="paymentRecordVisible"
      @ok="paymentRecordOk"
      @cancel="paymentRecordCancel"
      :width="700"
    >
      <template slot="footer">
        <a-button key="back" @click="paymentRecordCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="paymentRecordOk">确定</a-button>
      </template>
      <a-table
        :columns="columnsPaymentRecord"
        :dataSource="dataPaymentRecord"
        :pagination="false"
        bordered
        :rowKey="record => record.orderCode"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
const residences = [
  {
    value: "zhejiang",
    label: "Zhejiang",
    children: [
      {
        value: "hangzhou",
        label: "Hangzhou",
        children: [
          {
            value: "xihu",
            label: "West Lake"
          }
        ]
      }
    ]
  },
  {
    value: "jiangsu",
    label: "Jiangsu",
    children: [
      {
        value: "nanjing",
        label: "Nanjing",
        children: [
          {
            value: "zhonghuamen",
            label: "Zhong Hua Men"
          }
        ]
      }
    ]
  }
];

const columns = [
  {
    title: "订单编号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "phone" },
    align: "center"
  },
  {
    title: "订单详情",
    dataIndex: "orderDetailNames",
    scopedSlots: { customRender: "orderDetails" },
    align: "center"
  },
  {
    title: "代理商",
    dataIndex: "agentName",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "点位名称",
    dataIndex: "posName",
    scopedSlots: { customRender: "pointName" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "deviceCode",
    scopedSlots: { customRender: "equipmentNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "eventId",
    scopedSlots: { customRender: "activeId" },
    align: "center"
  },
  {
    title: "支付方式",
    dataIndex: "paymentMethodName",
    scopedSlots: { customRender: "paymentWay" },
    align: "center"
  },
  {
    title: "售后状态",
    dataIndex: "afterSaleStatusName",
    scopedSlots: { customRender: "afterState" },
    align: "center"
  },
  {
    title: "订单金额",
    dataIndex: "orderAmount",
    scopedSlots: { customRender: "orderAmount" },
    align: "center"
  },
  //   {
  //     title: "是否分润",
  //     dataIndex: "isShareProfit",
  //     scopedSlots: { customRender: "isShareProfit" },
  //     align: "center"
  //   },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "cerateTime" },
    align: "center"
  },
  {
    title: "支付时间",
    dataIndex: "paymentTime",
    scopedSlots: { customRender: "paymentTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsPaid = [
  {
    title: "订单编号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "phone" },
    align: "center"
  },
  {
    title: "订单详情",
    dataIndex: "orderDetailNames",
    scopedSlots: { customRender: "orderDetails" },
    align: "center"
  },
  {
    title: "代理商",
    dataIndex: "agentName",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "点位名称",
    dataIndex: "posName",
    scopedSlots: { customRender: "pointName" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "deviceCode",
    scopedSlots: { customRender: "equipmentNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "eventId",
    scopedSlots: { customRender: "activeId" },
    align: "center"
  },
  {
    title: "支付方式",
    dataIndex: "paymentMethodName",
    scopedSlots: { customRender: "paymentWay" },
    align: "center"
  },
  {
    title: "售后状态",
    dataIndex: "afterSaleStatusName",
    scopedSlots: { customRender: "afterState" },
    align: "center"
  },
  {
    title: "订单金额",
    dataIndex: "orderAmount",
    scopedSlots: { customRender: "orderAmount" },
    align: "center"
  },
  //   {
  //     title: "是否分润",
  //     dataIndex: "isShareProfit",
  //     scopedSlots: { customRender: "isShareProfit" },
  //     align: "center"
  //   },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "cerateTime" },
    align: "center"
  },
  {
    title: "支付时间",
    dataIndex: "paymentTime",
    scopedSlots: { customRender: "paymentTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsNo = [
  {
    title: "订单编号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "phone" },
    align: "center"
  },
  {
    title: "订单详情",
    dataIndex: "orderDetailNames",
    scopedSlots: { customRender: "orderDetails" },
    align: "center"
  },
  {
    title: "代理商",
    dataIndex: "agentName",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "点位名称",
    dataIndex: "posName",
    scopedSlots: { customRender: "pointName" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "deviceCode",
    scopedSlots: { customRender: "equipmentNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "eventId",
    scopedSlots: { customRender: "activeId" },
    align: "center"
  },
  {
    title: "支付方式",
    dataIndex: "paymentMethodName",
    scopedSlots: { customRender: "paymentWay" },
    align: "center"
  },
  {
    title: "售后状态",
    dataIndex: "afterSaleStatusName",
    scopedSlots: { customRender: "afterState" },
    align: "center"
  },
  {
    title: "订单金额",
    dataIndex: "orderAmount",
    scopedSlots: { customRender: "orderAmount" },
    align: "center"
  },
  //   {
  //     title: "是否分润",
  //     dataIndex: "isShareProfit",
  //     scopedSlots: { customRender: "isShareProfit" },
  //     align: "center"
  //   },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "cerateTime" },
    align: "center"
  },
  {
    title: "支付时间",
    dataIndex: "paymentTime",
    scopedSlots: { customRender: "paymentTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsPaymentRecord = [
  {
    title: "序号",
    dataIndex: "number",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "支付流水号",
    dataIndex: "transactionId",
    scopedSlots: { customRender: "payWater" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "endTime",
    scopedSlots: { customRender: "cerateTime" },
    align: "center"
  },
  {
    title: "支付平台",
    dataIndex: "paymentMethodName",
    scopedSlots: { customRender: "paymentPlatform" },
    align: "center"
  },
  {
    title: "支付方式",
    dataIndex: "chargingTypeName",
    scopedSlots: { customRender: "patternPayment" },
    align: "center"
  },
  {
    title: "失败原因",
    dataIndex: "errCodeDes",
    scopedSlots: { customRender: "causeFailure" },
    align: "center"
  }
];

const data = [
  {
    key: "1",
    phone: "18700000000",
    userType: "扫码登录",
    territory: "上海市",
    theCumulativeNumber: "5",
    theCumulativeSum: "132.56",
    registerTime: "2019/02/12 12:23:24",
    operation: "详情"
  }
  // {
  //   key: "2"
  // },
  // {
  //   key: "3"
  // }
];
export default {
  name: "ExpenseRecord",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      paginationPaid: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      paginationNo: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      visible: false,
      residences,
      columnsPaid,
      dataPaid: [],
      columnsNo,
      dataNo: [],
      paymentRecordVisible: false,
      columnsPaymentRecord,
      dataPaymentRecord: [],
      paymentRecordTitle: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
      this.startTime="";
      this.endTime="";
    },
    callback(key) {
      if (key) {
        this.handleReset();
      }
      if (key == 1) {
        this.findUserConsumeRecordListByCondition();
      }
      if (key == 2) {
        this.findPaidUserConsumeRecordListByCondition();
      }
      if (key == 3) {
        this.findUnPayUserConsumeRecordListByCondition();
      }
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
    
      this.findUserListByCondition();
    },
    TablePaid(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
     
      this.findUserListByCondition();
    },
    TableNo(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
   
      this.findUserListByCondition();
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    },

    paymentRecordModal(text, record) {
      this.paymentRecordVisible = true;
      this.findPayRecordListByOrderId(record.orderId);
      this.paymentRecordTitle = record.orderCode + "-支付记录";
    },
    paymentRecordOk(e) {
      this.paymentRecordVisible = false;
    },
    paymentRecordCancel(e) {
      this.paymentRecordVisible = false;
    },

    // 点击详情跳页传值
    detailsInfo(text, record) {
      var orderId = record.orderId;
      this.$store.commit("orderId", orderId);
      this.$router.push({
        path: "/home/orderadmin/sellorder/selldetails"
      });
    },

    // 消费记录初始化
    listInit() {
      this.axios
        .post(this.baseUrl + "/user/listInit", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          //   console.log(response);
        });
    },

    // 查询用户所有消费记录
    findUserConsumeRecordListByCondition($event) {
      if($event){
        this.pagination.current=1
      }
      var values = this.form.getFieldsValue();
      if (values.registerTime == undefined) {
        values.registerTime == undefined;
      } else {
        this.startTime = moment(values.registerTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.registerTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/user/findUserConsumeRecordListByCondition", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          afterSellStatus: values.afterState,
          devCode: values.equipmentNumber,
          startTime: this.startTime,
          endTime: this.endTime,
          orderCode: values.orderNumber,
          userId: this.$store.state.userId
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },

    // 查询用户已经支付的消费记录
    findPaidUserConsumeRecordListByCondition($event) {
      if($event){
        this.pagination.current=1
      }
      var values = this.form.getFieldsValue();
      if (values.registerTime == undefined) {
        values.registerTime == undefined;
      } else {
        this.startTime = moment(values.registerTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.registerTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/user/findPaidUserConsumeRecordListByCondition", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.paginationPaid.current,
          pageSize: this.paginationPaid.pageSize,
          afterSellStatus: values.afterState,
          devCode: values.equipmentNumber,
          startTime: this.startTime,
          endTime: this.endTime,
          orderCode: values.orderNumber,
          userId: this.$store.state.userId
        })
        .then(response => {
          // console.log(response);
          this.dataPaid = response.data.data.list;
          this.paginationPaid.total = response.data.data.total;
          this.paginationPaid.pageSize = response.data.data.pageSize;
          this.paginationPaid.current = response.data.data.pageNum;
        });
    },

    // 查询用户未支付的消费记录
    findUnPayUserConsumeRecordListByCondition() {
      var values = this.form.getFieldsValue();
      if (values.registerTime == undefined) {
        values.registerTime == undefined;
      } else {
        this.startTime = moment(values.registerTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.registerTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(
          this.baseUrl + "/user/findUnPayUserConsumeRecordListByCondition",
          {
            loginToken: this.$store.state.loginToken,
            pageNum: this.paginationNo.current,
            pageSize: this.paginationNo.pageSize,
            afterSellStatus: values.afterState,
            devCode: values.equipmentNumber,
            startTime: this.startTime,
            endTime: this.endTime,
            orderCode: values.orderNumber,
            userId: this.$store.state.userId
          }
        )
        .then(response => {
          // console.log(response);
          this.dataNo = response.data.data.list;
          this.paginationNo.total = response.data.data.total;
          this.paginationNo.pageSize = response.data.data.pageSize;
          this.paginationNo.current = response.data.data.pageNum;
        });
    },

    findPayRecordListByOrderId(orderId) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/user/findPayRecordListByOrderId", {
          loginToken: this.$store.state.loginToken,
          orderId: orderId
        })
        .then(response => {
          console.log(response);
          this.dataPaymentRecord = response.data.data;
        });
    }
  },
  created() {
    this.findUserConsumeRecordListByCondition();
    this.listInit();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ExpenseRecord {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
.key {
  color: rgb(98, 144, 255);
}
</style>
